/**
 * @Title: evaluation-drawer.js
 * @Description: evaluation-drawer
 * @author: Fanchao
 * @date: 2020/8/25 1:20 上午
 * @version V1.0
 */
import React, {} from 'react';
import { Drawer, Button } from 'antd';
import { connect } from 'umi';
import styles from './evaluation-drawer.less';
import EvaluationPlanModal from '@/pages/evaluations/question/components/evaluation-plan-modal';
import { CloseOutlined, EditOutlined } from '@ant-design/icons';

const Item = ({ data }) => {
    return (
        <>
            {
                data.map(c => {
                    return (
                        <div key={c.planDetailId} className="planDetailModelListItem">
                            <span>{c.optionContent}</span>
                            <span>{c.score}</span>
                        </div>
                    );
                })
            }
        </>
    );
};
const EvaluationDrawer = ({ questions: { evaluationDrawerVisible, evaluatePlanList }, dispatch }) => {
    const onClose = () => {
        dispatch({
            type: 'questions/setEvaluationDrawerVisible',
            payload: false,
        });
    };
    const add = () => {
        dispatch({
            type: 'questions/setEvaluationPlanModal',
            payload: true,
        });
        dispatch({
            type: 'questions/setTitle',
            payload: '新增评价等级',
        });
        dispatch({
            type: 'questions/setItemData',
            payload: { evaluatePlanName: '', planDetailModelList: [] },
        });
    };
    const editData = (item) => {
        dispatch({
            type: 'questions/setEvaluationPlanModal',
            payload: true,
        });
        dispatch({
            type: 'questions/setTitle',
            payload: '修改评价等级',
        });
        dispatch({
            type: 'questions/setItemData',
            payload: item,
        });
    };
    const deleteData = (item) => {
    };
    return (
        <div>
            <Drawer
                title="评价等级管理"
                width={720}
                onClose={onClose}
                visible={evaluationDrawerVisible}
                bodyStyle={{ paddingBottom: 80 }}
                footer={
                    <div
                        style={{
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={onClose} type="primary">
                            关闭
                        </Button>
                    </div>
                }
            >
                <Button onClick={add} type="primary">
                    新增评价等级
                </Button>
                <div className="evaluatePlanListContainer">
                    {
                        evaluatePlanList.length === 0 ? null : evaluatePlanList.map(item => {
                            return (
                                <div className="list-item" key={item.evaluatePlanId}>
                                    <div className="header">
                                        <span className="evaluatePlanName">{item.evaluatePlanName}</span>
                                        <div className="icon">
                                            <div onClick={() => editData(item)}>
                                                <EditOutlined/>
                                            </div>
                                            {/*<div onClick={() => deleteData(item)}>*/}
                                            {/*    <CloseOutlined/>*/}
                                            {/*</div>*/}
                                        </div>
                                    </div>
                                    <div className="planDetailModelList">
                                        <Item data={item.planDetailModelList}/>
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
            </Drawer>
            <EvaluationPlanModal/>
        </div>
    );
};

export default connect(({ questions, dispatch }) => ({
    questions,
    dispatch,
    // loading: loading.effects['students/getDataSource'],
}))(EvaluationDrawer);


